import React, { Component } from 'react';
import axios from 'axios'
import "./App.css"

class App extends Component {
  constructor(props) {
    super(props)
    //可以做什么事情?
    //1. 初始化状态
    this.state = {
       msg:"牛",
       data:[]
    }
    // 2. 创建ref
    this.ref= React.createRef();
    //3. 修改事件this指向
    this.handleClick = this.handleClick.bind(this);
  }

  static getDerivedStateFromProps(props,state){
    return null
  }
  
  handleClick(){
    /* 3. render 返回一段JSX ！！！ 不要在render 函数中执行 this.setState*/
    console.log("执行 handleClick");
  }

  render() {
    return (
      <div>
        <div className="outerBox" id="outerBox">
          <div className="innerBox">
            
          </div>
        </div>
        <input type="text" ref={this.ref}/>
        {
          this.state.data.map(d=>{
            return <img src={d.image_src} key={d.goods_id}></img>
          })
        }
        
      </div>
    );
  }

  //组件挂载 DOM 树上
  componentDidMount(){
    //1. 请求数据
    axios.get("https://www.linweiqin.cn/api/public/v1/home/swiperdata").then(res=>{
      console.log(res)
      //向state存入数据
      this.setState({
        data:res.data.message
      })
    })
    //2. 订阅
    // todo: redux subscribe 订阅数据
    //3. 注册事件
    document.getElementById("outerBox").addEventListener("scroll",function(e){
      console.log("盒子滚动啦",e);
    })
  }
}

export default App;
